<template>
	<list-box :name="name" :word="word" :params="params">
		<swiper class="list-swiper" next-margin="30rpx" :style="{height: `${200*rows}rpx`}">
			<swiper-item class="swiper-item" v-for="(n, index) in column" :key="index">
				<!-- rows=4
				 slice(start, end) 获取数组中指定范围元素数组，包头不包尾
				 开始下标：0，结束下标4
				 index*rows, (index+1)*rows
				 -->
				<!-- 使用slice方法分割courseData数组，每个轮播页显示指定行数的课程 -->
				<course-item v-for="(item, i) in courseData.slice(index*rows, (index+1)*rows)" :key="i" :item="item"></course-item>
			</swiper-item>
		</swiper>
	</list-box>
</template>

<script>
	import listBox from './list-box.vue'
	import courseItem from '@/components/common/course-item.vue'
	// 导入课程模拟数据
	import courseData from '@/mock/courseData.js'

	export default {
		components: {listBox, courseItem},

		props: {
			name: {
				type: String,
				default: '热门推荐'
			},
			// 热词标签文字
			word: { // HOT
				type: String,
				default: null
			},
			// 默认swiper-item展示列数
			column: {
				type: Number,
				default: 2
			},
			// 默认行数
			rows: {
				type: Number,
				default: 5
			},
			// 课程数据列表
			courseData: {
				type: Array,
				// 默认使用导入的模拟数据
				default: () => courseData
			},

			// 点击`全部`按钮要向搜索页传递的查询条件
			params: Object,
		}
	}
</script>

<style lang="scss">
	// .list-swiper {
	// 	height: 800rpx;
	// }
</style>
